<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSDN</title>

	<style type="text/css">
	body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img,a,input,p{margin: 0px; padding:0px;text-decoration: none;}
	ul{list-style: none;}
	a{color: #3D3D3D;}
	/*csdn工具栏样式 宽度1900像素，上下填充0，左右自动填充*/
	#csdn-toolbar{border-bottom: 0 solid #dfdfdf;width:1900px;margin: 0 auto;display: inline-block;}
	
	/*左边导航栏，左外边框200px,左对齐*/
	.pull-left{margin-left:200px;float: left;width:50%;list-style: none;line-height:50px;height: 50px;}
	/*右边导航栏,右外边框180px,右对齐*/
	.pull-right{width:30%;padding:7px 0 0;height:40px;float: right;margin-right: 180px;}
 
	/*设置工具栏文字样式*/
	.toolbar-to-feed{float: left;/*左浮动*/text-decoration: none;/*去掉下划线*/margin-top:1px;margin-left:12px;color: #3D3D3D;text-decoration: none;line-height:50px;
	}
	.toolbar-to-feed:hover{color:red;}
	/*设置右侧工具栏*/
	.btns-right{float: right;}
	.btns-right a{float: right;margin-top:1px;margin-left:12px;color: #3D3D3D;
                text-decoration:none;line-height:40px;}
	.btns-right a:hover{color:red;}
	#input_search{border:1px solid #ccc;border-radius:5px;height: 30px;width: 162px;}
    #input_search input{box-sizing: border-box;height: 25px;width:128px;position:relative;top:-4px;left:2px;border:0;margin:0 3px;outline:0;text-align: center;vertical-align:center;font-size: 14px;}
    #input_search img{cursor: pointer;}
	
	/*设置导航栏高度46px，底部外边框8px,背景颜色*/	
	.edu-nav{height: 55px;background-color:#e4e9ec;margin-bottom:5px;}
	/*导航栏左边，左外边框200px*/
	.nav-left{width:50%;float: left;margin-left:200px;}
	.nav-left ul li{float:left;height:46px;list-style: none;}
	.nav-left ul li a{float: left;margin-top:1px;margin-left:12px;color: #3D3D3D;
                text-decoration: none;line-height:40px;}
    .nav-left ul li a:hover{color:red;}
	/*导航栏右边，右外边框200px*/
	.nav-right{width:10%;float: right;margin-right:188px;}
	
	/*设置字体颜色*/
	.nav-right ul li a{display: block; color: #3D3D3D;margin-top:5px;margin-right:12px;}
	.nav-right ul li a:hover{color:red;}

	/*main主体内容设置*/
	.main{width:1400px;margin: auto;}
	
	/*左边栏设置,宽度165px,左浮动 */
	.left-side{width:350px;float:left;}
	/*student列表 背景颜色和边框颜色*/
	.student,.adv{background: #f9f9f9;border: 1px solid #eee;}
	/*student中list高度，底部颜色*/
	.student li,.adv li{height: 55px;line-height: 55px;text-indent: 40px;border-bottom: 1px solid #eee;}
	.student li a:hover,.adv li a:hover{color:red;}
	/*student字体大小，颜色*/
	.student li a,.adv li a{ color: #333;font-size: 14px;margin-left:8px;}
	
	.jiacu{font-size:25px;}
	.hidden{width:350px;height:30px;}
	
	/*右边栏宽度800px*/
	.right-side{width:800px;margin-left: 380px;}
	/*我的课程，高度46px，底部实线*/
	.mycourse{ width: 100%;height:46px;border-bottom: 1px solid #e2e2e2;margin-bottom: 15px;list-style: none;}
	/*左浮动*/
	.mycourse li{float: left;font-size: 18px;margin-right:20px;margin-top:15px;margin-bottom: 0;}

	.mycourse_filter{ width: 100%;height:40px;list-style: none;background-color:#e4e9ec; }
	/*设置字体颜色*/
	.mycourse_filter a{float: left;font-size: 14px;margin-left:20px;margin-bottom: 0;text-decoration: none;line-height:40px;display: block;color: #3D3D3D;}
	.fenge{margin-left:10px;margin-right: 10px;}
	
	/*设置课程列表中每隔课程盒子，位置为相对位置,内填充为上20px，右0px，下20px，左边10px 底部为1px的灰实线,左浮动380*/
  	.mycourse_list .item_box {
		position: relative;
		padding:  0 20px 10px;
		border-bottom: 1px solid #e2e2e2;
		height: 130px;
	}

	/*设置图片左浮动*/
	.item_box .f1{float: left;}
		
	/*右边图标右浮动*/
	.item_box .item_right{float: right;}
		
	/*设置action为右对齐*/
	.item_right .action{
	    width: 100%;
	    text-align: right;
	    bottom: 0;
	    padding-right: 10px;
		text-decoration: none;
	}
		
	/*设置按钮背景颜色为红色，文本为白色，中间对齐*/
	.btn_red {
		background-color: #ca0c16;
		border-radius: 4px;
	    color: #fff;
	    display: inline-block;
	    font-size: 14px;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	    text-decoration: none;
	    padding: 0 20px;
	    cursor: pointer;
	    vertical-align: middle;
	}
	.mycourse_list .item_box{padding: 10px;}

	/*设置课程中间主要信息，左外边距188px,右外边框210px*/
	.mycourse_list .item_box .item_main {
		padding: 20px;
	    margin-left: 200px;
	    margin-right: 210px;
	    padding:  10px;
	    margin-right: 0px;
	}
	
	/*设置课程中a标签字体大小为20px*/
	.item_main a{font-size:20px;margin-top:20px;}
	
	.item_main p {
	    line-height: 20px;
	    color: #666;
	}
	/*设置课程中p的span标签为宽度74*/
	.item_main p span {
		padding: 10px 10px 10px 0px;
	    width: 300px;
	    font-size:15px;
	    display: inline-block;
	}
	
	.progressbar{    
		display: inline-block;
		width: 150px;
		margin: 0 5px;
	}
	
	.load-bar {
	    background-color: #e8e8e8;
	    border-radius: 10px;
	    box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.2) inset;
	    height: 4px;
	    position: relative;
	    width: 100%;
	}

	.load-bar-inner {
	    background-color: #77d885;
	    border-radius: inherit;
	    height: 99%;
	    position: relative;
	    width: 100px;
	}

	/*csdn网站分页信息*/
	.csdn-pagination{    
		margin-left:580px;
		display: table;
	}
	.csdn-pagination * {
		vertical-align: middle;
	}
		
	.text{
	    color: #999;
	}	
	.btn-prev{
		background:url(./images/prev.png) no-repeat;
		display: inline-block;
		width: 39px;
		height: 44px;
	}

	.btn-one{
		background:url(./images/one.png) no-repeat;
		display: inline-block;
		width: 39px;
		height: 44px;
	}

	.btn-two{
		background:url(./images/two.png) no-repeat;
		display: inline-block;
		width: 39px;
		height: 44px;
	}

	.btn-three{
		background:url(./images/three.png) no-repeat;
		display: inline-block;
		width: 39px;
		height: 44px;
	}

	.btn-next{
		background:url(./images/next.png) no-repeat;
		display: inline-block;
		width: 39px;
		height: 44px;
	}

	.btn-go{
		background:url(./images/go.png) no-repeat;
		display: inline-block;
		margin-top: 5px;
		width: 39px;
		height: 44px;
	}
	
	
	.page-go{margin-left:20px;}

	.skip{box-sizing: border-box;height: 25px;width:28px;}
	.page-go{margin-left:20px;}
	.csdn-pagination input {
	    width: 30px;
	    height: 22px;
	}
	.buttom{
		width: 100%;
		height: 200px;
		border-top: 1px solid #e2e2e2;
	}

	.pub-footer-new{
		
		margin-top:10px;
		padding-top: 20px;
		margin-right: 280px;
	}
	.pub-footerall{
		margin-left:200px;
		width:900px;
		float: left;
	}
	.feed-copyright{
		clear: both;
	    overflow: hidden;
	    text-align: right;
	    font-size: 14px;
	    color: #999;
	}

	.contact-info, .contact-baidu-info, .contact-csdn-info, .safe-info{
		font-size: 14px;
	    color: #5C5C5C!important;
	    line-height: 20px;
	    margin: 5px 0 5px 0;
	    text-align: right;
	}
	
	
	.right-dotte{
		color: #4d4d4d;
	    text-decoration: none;
	    font-weight: bold;
	}
	.fenge{margin-left:10px;margin-right: 10px;}
	.curr{color: red;border-bottom: 1px solid #ca0c16;padding-bottom:6px;}
	.shiping{padding-left:12px;padding-top:8px;color:red;border-bottom: 1px solid #ca0c16;}

	</style>
</head>
<body>
	
	<div id="csdn-toolbar">
		<div class="pull-left">
			<!-- csdn logo-->
			<li style="float: left;margin-top:10px;">
				<a href="#"><img src="./images/csdn_logo.jpg"></a>
			</li>

			<li><a href="#" class="toolbar-to-feed">首页</a></li>
            <li><a href="#" class="toolbar-to-feed">博客</a></li>
            <li><a href="#" class="toolbar-to-feed"  style="border-bottom: 2px solid #CA0C16;">学院</a></li>
            <li><a href="#" class="toolbar-to-feed">下载</a></li>
            <li><a href="#" class="toolbar-to-feed">图文课</a></li>
            <li><a href="#" class="toolbar-to-feed">论坛</a></li>
            <li><a href="#" class="toolbar-to-feed">APP</a></li>
            <li><a href="#" class="toolbar-to-feed">问答</a></li>
            <li><a href="#" class="toolbar-to-feed">商城</a></li>
            <li><a href="#" class="toolbar-to-feed">VIP会员</a></li>
            <li><a href="#" class="toolbar-to-feed">活动</a></li>
            <li><a href="#" class="toolbar-to-feed">招聘</a></li>
            <li><a href="#" class="toolbar-to-feed">ITeye</a></li>
            <li><a href="#" class="toolbar-to-feed">GitChat</a></li>
		</div>

		<div class="pull-right">
			<ul class="btns">
				<li class="btns-right"><img src="./images/user.png" ></li>
				<li class="btns-right">
                	<img src="./images/email.jpg" >
                	<a href="#">消息</a>
                </li>

				<li class="btns-right">
                	<img src="./images/money.png" >
                	<a href="#">赚零钱</a>
                </li>

				<li class="btns-right">
                	<img src="./images/loockBlog.jpg" >
                	<a href="#">写博客</a>
                </li>

                <li class="btns-right">
                    <div id="input_search">
                        <input type="text" name="search" placeholder="请搜索学院课程">
                        <img src="./images/searbtn.jpg" >
                    </div>
             	</li>
			</ul>
		</div>
	</div>

	<div class="edu-nav">
		<div class="nav-left">
			<ul>
               	<li><img src="./images/EDU.png" style="float: left;"></li>
               	<li class="shiping">
               		视频课
               		<span class="nav_cur_arrow"></span>
               	</li>
                <li><a href="#">讲师</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">每日秒杀</a></li>
                <li><a href="#">会员</a></li>
                <li><a href="#">会员免费</a></li>
                <li><a href="#">3月限免</a></li>
                <li><a href="#">TinyMind</a></li>
                <li><a href="#">课程答疑</a></li>
                <li><a href="#">证书查询</a></li>
                <li><a href="#">我要开课</a></li>       
            </ul>
		</div>
		<div class="nav-right">
			<ul>                
                <li style="float: right;"><a href="#">我的学院</a></li>
                <li style="float: right;"><img src="./images/red_hat.jpg" style="margin-top: 3px;"></li>
            </ul>
		</div>
	</div>

	<div class="main">
		<div class="left-side">
			<ul class="student">
				<li >我是学员</li>
				<li ><img src="./images/kecheng.png" ><a href="#" style="color:red">我的课程</a></li>					
				<li ><img src="./images/huiyuan.jpg" ><a href="#">我的的会员</a></li>
				<li ><img src="./images/qianbao.jpg" ><a href="#">我的钱包</a></li>
				<li ><img src="./images/tiwen.jpg" ><a href="#">我的提问</a></li>
				<li ><img src="./images/dingdan.jpg" ><a href="#">我的订单</a></li>
				<li ><img src="./images/youhui.jpg" ><a href="#">优惠券</a></li>
				<li ><img src="./images/jiangshi.jpg" ><a href="#">讲师卡</a></li>
			</ul>
			<ul class="hidden"></ul>
			<ul class="adv">
				<li class="jiacu">会员特权</li>
				<li ><img src="./images/mei1.jpg" ><a href="#">千门专享课程免费看</a></li>
				<li ><img src="./images/mei2.jpg" ><a href="#">精品课程每月免费兑</a></li>
				<li ><img src="./images/mei3.jpg" ><a href="#">购课低至八折</a></li>
				<li ><img src="./images/mei4.jpg" ><a href="#">600次下载特权</a></li>
				<li ><img src="./images/mei5.jpg" ><a href="#">专享讲师社群答疑</a></li>
				<li ><img src="./images/regist-btn.jpg" ></li>
			</ul>
		</div>
		<div class="right-side">
			<ul class="mycourse">
				<li class="curr">已购课程</li>
				<li>最近播放的</li>
				<li>收藏的课程</li>
				<li>活动课程</li>
			</ul>

			<ul class="mycourse_filter">
				<a href="#">类型<span class="fenge">|</span></a>
				
				<a href="#">全部</a>
				
				<a href="#">课程</a>
				
				<a href="#">套餐</a>
				
				<a href="#">直播</a>
				
				<a href="#">教学中心</a>
				
				<a href="#">已领取课程</a>
			</ul>

			<ul class="mycourse_list">
				<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
					<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师-第5周</a>
						<p>
							<span>课程时长 14课时/ 07小时54分25秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:100%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">13/13</span>
						</div>
					</div>

				</li>

				<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
										<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师特训班-第一期直播回放</a>
						<p>
							<span>课程时长 19课时/ 24小时33分20秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:0%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">0/19</span>
						</div>
					</div>

				</li>

				<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
										<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师-第4周</a>
						<p>
							<span>课程时长 10课时/ 06小时38分08秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:90%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">9/10</span>
						</div>
					</div>

				</li>

				<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
					
										<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师-第3周</a>
						<p>
							<span>课程时长 11课时/ 05小时42分03秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:64%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">7/11</span>
						</div>
					</div>
				</li>
				
								<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
					
										<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师-第2周</a>
						<p>
							<span>课程时长 19课时/ 04小时46分44秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:100%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">19/19</span>
						</div>
					</div>
				</li>

								<li class="item_box">
					<a href="#" class="f1">
						<img src="./images/tup1.jpg">
					</a>
					
										<div class="item_right">
						<div class="info">
		
						</div>
						<div class="action">
							<a href="#" class="btn_red">继续学习</a>

						</div>
					</div>

					<div class="item_main">
						<a href="#">Python全栈工程师-第1周</a>
						<p>
							<span>课程时长 26课时/ 07小时11分03秒</span>
						</p>
						<div class="studyprocess">
							学习进度
							<div class="progressbar">
								<div class="load-bar">
									<div style="width:15%" class="load-bar-inner">
										<span></span>
									</div>
								</div>
							</div>
							<span class="pinfo">4/26</span>
						</div>
					</div>
				</li>
			</ul>

		</div>

		<div class="csdn-pagination">
			<span class="page-nav">
				<span class="text">共11条数据</span>
				<a href="#" class=btn-prev> </a>
				<a href="#" class=btn-one> </a>
				<a href="#" class=btn-two> </a>
				<a href="#" class=btn-three> </a>
				<a href="#" class=btn-next> </a>
			</span>
			<span class="page-go">
				<span class="text">到第</span>
				<input class="skip" type="text">
				<span class="text">页</span>
				<a href="#" class=btn-go> </a>
			</span>
			
		</div>
	</div>
	
	<div class="buttom">
		<div class="pub-footer-new">
			<div class="pub-footerall">
				<div class="feed-copyright">
					<p>
						<a class="right-dotte" href="#">关于我们</a>
						<span class="fenge">|</span>
						<a class="right-dotte" href="#">招聘</a>
						<span class="fenge">|</span>
						<a class="right-dotte" href="#">广告服务</a>
						<span class="fenge">|</span>
						<a class="right-dotte" href="#">网站地图</a>
					</p>
				</div>

				<div class="contact-info">
					<p>
						<img src="./images/QQ.jpg">
						<span class="right-info">QQ客服</span>
						<span class="fenge">|</span>

						<img src="./images/emai.jpg">
						<span class="right-info">kefu@csdn.net</span>
						<span class="fenge">|</span>

						<img src="./images/kefu.jpg">
						<span class="right-info">客服论坛</span>
						<span class="fenge">|</span>

						<img src="./images/tel.jpg">
						<span class="right-info">400-660-0108</span>
						<span class="fenge">|</span>

						<span class="right-info">工作时间 8:30-22:00</span>
					</p>
				</div>

				<div class="contact-baidu-info">
					<p>
						<img src="./images/baidu.jpg">
						<span class="text">百度提供站内搜索 京IPC证19004658号</span>
					</p>
				</div>

				<div class="contact-csdn-info">
					<p>
						<span class="text">©1999-2019 北京创新乐知网络技术有限公司</span>
					</p>
				</div>

				<div class="safe-info">版权申诉 家长监护 经营性网站备案信息 网络110报警服务 中国互联网举报中心 北京互联网违法和不良信息举报中心</div>
			</div>
			
			<div class="contact-box" align="right" >
				<a href="#"><img src="./images/erweima.jpg"></a>
			</div>
		</div>
	</div>
</body>
</html>